/**
 * 仓库-库位
 */
<template>
   <vp-main-page @refresh="loadDataList">
		<template #actions>
			<vp-btn-add v-if="module.id" v-auth="'masterDataWarehouse.edit'" @click="handleAddLocation" />
			<vp-btn-del v-if="module.id" v-auth="'masterDataWarehouse.edit'" @click="handleDeleteLocation" />
		</template>
		<template #table>
			<vp-table ref="multipleTable" :data="tableData" row-key="id" v-loading="loading"  @selection-change="handleSelectionChange"  @row-click="handleRowClick">
				<el-table-column type="selection" :reserve-selection="true" align="center" width="55" />
				<el-table-column  type="index" align="center" label="#" width="55">
				</el-table-column>
				<el-table-column prop="kw" width="180" show-overflow-tooltip>
					<template #header><vp-label zh="库位号" en="Location No."/></template>
				</el-table-column>
				<el-table-column prop="bz" min-width="200" show-overflow-tooltip>
					<template #header><vp-label zh="备注" en="Remark"/></template>
				</el-table-column>
				<el-table-column fixed="right" width="100">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="{ row }">
						<vp-btn-edit text v-auth="'masterDataWarehouse.edit'" @click="handleEditLocation(row)"/>
						<vp-btn-del text v-auth="'masterDataWarehouse.edit'" @click="handleDelLocation(row)"/>
					</template>
				</el-table-column>
			</vp-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<!-- 新增模块页面 -->
		<AddLocation ref="addLocationRef" @form-submited="loadDataList"></AddLocation>
		<!-- 新增/修改模块页面 -->
		<EditLocation ref="editLocationRef" @form-submited="loadDataList"></EditLocation>
	</vp-main-page>
</template>
<script setup lang="ts" name="masterDataWarehouseLocationTable">
	import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
	import VpMessageBox from '/@/components/vp/VpMessageBox';
	import request from '/@/utils/request';
	import { DEFAULT_PAGE } from '/@/utils/page';
import { ElMessage } from 'element-plus';

	const AddLocation = defineAsyncComponent(() => import('./dialogs/AddLocation.vue'));
	const EditLocation = defineAsyncComponent(() => import('./dialogs/EditLocation.vue'));

	const props = defineProps({
		module: {
			type: Object
		},
	});

	// 监听模块id改变，则刷新页面
	watch(()=> props.module, ()=>{
		loadDataList();
		console.info(props.module)
	})

	// 组件挂载后事件
	onMounted(() => {
		loadDataList()
	})

	const page = reactive({
		...DEFAULT_PAGE,
	})

	const tableData = ref([]);
	const loading = ref(false);

	const searchForm = reactive({
		keyword: "",
	});

	// 加载列表数据
	const loadDataList = () => {
		loading.value = true;
		request.get('/masterData/warehouse/location/list', {
			params: {
				...searchForm,
				mainid: props.module.id,
			}
		}).then(res => {
			tableData.value = res?.data?.list || []
			page.total = res?.data?.total || 0
			page.pageNum = res?.data?.pageNum || 1
		}).finally(()=>{
			loading.value = false;
		})	
	}

	const searchFormRef = ref();
	const addLocationRef = ref();
	const editLocationRef = ref();
	// 新增库位
	
	const handleAddLocation = () => {
		addLocationRef.value.handleOpen('add', props.module);
	}

	// 修改库位
	const handleEditLocation = (row: any) => {
		editLocationRef.value.handleOpen('edit', props.module, row.id);
	}

	// 删除库位
	const handleDelLocation = (row: any) => {
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/masterData/warehouse/location/${row.id}`).then(res => {
				loadDataList();
			})
		});
	}

	const multipleSelection = ref([]);
	//批量删除
	const handleDeleteLocation = () =>{
		if(multipleSelection.value.length > 0){
			loading.value = true;
			let obj = {
					id : props.module.id
				};
				let idList = multipleSelection.value.map((obj: any) =>{
					return obj.id;
				})
				request.post("/masterData/warehouse//location/batch/delete", {
					...obj,
					idList: idList
				}).then(() => {
					loadDataList();
				}).catch(()=>{
                }).finally(()=>{
					loading.value = false;
				})
		}else {
			ElMessage.error("请选择需要删除的库位/Please select the storage location(s) to be deleted");
		}
	}
	const multipleTable = ref();
	// 行点击事件
	const handleRowClick = (row: any) => {
		multipleTable.value.toggleRowSelection(row);
	}

	const handleSelectionChange = (val: any) => { 
		multipleSelection.value = val;
	}
</script>
